Tiny File Manager | linear-component.html

Back Back Up Advanced Editor

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Gauge Test</title>
    <script src="../gauge.min.js"></script>
</head>
<body style="background:#222">

<button onclick="animateGauges()">Animate</button>
<button onclick="stopGaugesAnimation()">Stop animation</button>

<hr>

<canvas data-type="linear-gauge"
        data-width="160"
        data-height="600"
        data-border-radius="20"
        data-borders="true"
        data-bar-stroke-width="20"
        data-minor-ticks="10"
        data-major-ticks="0,10,20,30,40,50,60,70,80,90,100"
        data-color-numbers="red,green,blue,transparent,#ccc,#ccc,#ccc,#ccc,#ccc,#ccc,#ccc"
        data-color-major-ticks="red,green,blue,transparent,#ccc,#ccc,#ccc,#ccc,#ccc,#ccc,#ccc"
        data-color-bar-stroke="#444"
        data-value="22.3"
        data-units="°C"
        data-color-value-box-shadow="false"
        data-tick-side="left"
        data-number-side="left"
        data-needle-side="left"
        data-animate-on-init="true"
        data-color-plate="transparent"
        data-font-value-size="45"
></canvas>

<canvas data-type="linear-gauge"
        data-width="160"
        data-height="600"
        data-border-radius="20"
        data-borders="0"
        data-bar-stroke-width="0"
        data-minor-ticks="20"
        data-animation-rule="cycle"
        data-animation-duration="1000"
        data-title="Temperature"
        data-units="°C"
        data-color-value-box-shadow="false"
        data-animated-value="true"
></canvas>

<canvas data-type="linear-gauge"
        data-width="160"
        data-height="600"
        data-border-radius="0"
        data-borders="0"
        data-bar-begin-circle="25"
        data-minor-ticks="10"
        data-value="36.6"
        data-min-value="35"
        data-max-value="42"
        data-title="°C"
        data-major-ticks="35,36,37,38,39,40,41,42"
        data-ticks-width="18"
        data-ticks-width-minor="7.5"
        data-bar-width="5"
        data-highlights="false"
        data-color-value-box-shadow="false"
        data-value-box-stroke="0"
        data-color-value-box-background="false"
        data-value-int="2"
        data-value-dec="1"
></canvas>

<canvas data-type="linear-gauge"
        data-width="160"
        data-height="600"
        data-border-radius="20"
        data-borders="0"
        data-bar-begin-circle="false"
        data-title="Temperature"
        data-units="°C"
        data-color-units="#f00"
        data-minor-ticks="10"
        data-value="99"
        data-major-ticks="0,10,20,30,40,50,60,70,80,90,100"
        data-tick-side="right"
        data-number-side="right"
        data-needle-side="right"
        data-animation-rule="bounce"
        data-animation-duration="750"
        data-bar-stroke-width="5"
        data-value-box-border-radius="0"
        data-value-text-shadow="false"
></canvas>

<br>

<canvas data-type="linear-gauge"
        data-width="600"
        data-height="160"
        data-border-radius="0"
        data-borders="0"
        data-bar-begin-circle="false"
        data-title="Temperature"
        data-units="°C"
        data-value="75.5"
        data-bar-stroke-width="5"
        data-highlights='[{"from":50, "to":75, "color": "red"}]'
></canvas>

<br>

<canvas data-type="linear-gauge"
        data-width="600"
        data-height="160"
        data-border-radius="20"
        data-borders="0"
        data-bar-stroke-width="0"
        data-value="66.6"
        data-tick-side="left"
        data-number-side="left"
        data-needle-side="left"
        data-animation-rule="bounce"
        data-animation-duration="750"
        data-title="Temperature"
        data-units="°C"
></canvas>

<canvas data-type="linear-gauge"
        data-width="400"
        data-height="150"
        data-min-value="0"
        data-max-value="220"
        data-major-ticks="0,20,40,60,80,100,120,140,160,180,200,220"
        data-minor-ticks="2"
        data-stroke-ticks="true"
        data-highlights='false'
        data-color-plate="#fff"
        data-border-shadow-width="0"
        data-borders="false"
        data-bar-begin-circle="false"
        data-bar-width="10"
        data-tick-side="left"
        data-number-side="left"
        data-needle-side="left"
        data-needle-type="line"
        data-needle-width="3"
        data-color-needle="#222"
        data-color-needle-end="#222"
        data-animation-duration="1500"
        data-animation-rule="linear"
        data-animation-target="plate"
></canvas>
<script>
if (!Array.prototype.forEach) {
    Array.prototype.forEach = function(cb) {
        var i = 0, s = this.length;
        for (; i < s; i++) {
            cb && cb(this[i], i, this);
        }
    }
}

var timers = [];

function animateGauges() {
    document.gauges.forEach(function(gauge) {
        timers.push(setInterval(function() {
            gauge.value = Math.random() *
                (gauge.options.maxValue - gauge.options.minValue) +
                gauge.options.minValue;
        }, gauge.animation.duration + 500));
    });
}

function stopGaugesAnimation() {
    timers.forEach(function(timer) {
        clearInterval(timer);
    });
}
</script>

</body>
</html>